/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.extensions-viewlet {
	height: 100%;
}

.extensions-viewlet > .header {
	height: 38px;
	box-sizing: border-box;
	padding: 5px 9px 5px 16px;
}

.extensions-viewlet > .header > .search-box {
	width: 100%;
	height: 28px;
	line-height: 18px;
	box-sizing: border-box;
	padding: 4px;
	border: 1px solid transparent;
	-webkit-appearance: textfield;
}

.extensions-viewlet > .extensions {
	height: calc(100% - 38px);
}

.extensions-viewlet > .extensions.hidden,
.extensions-viewlet > .message.hidden {
	display: none;
	visibility: hidden;
}

.extensions-viewlet > .message {
	padding: 5px 9px 5px 16px;
	cursor: default;
}

.extensions-viewlet > .extensions .extension {
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	padding: 0 11px 0 16px;
	overflow: hidden;
	display: flex;
}

.extensions-viewlet > .extensions .extension.loading {
	background: url('loading.svg') center center no-repeat;
}

.extensions-viewlet > .extensions .extension > .icon {
	width: 42px;
	height: 42px;
	padding: 10px 14px 10px 0;
	flex-shrink: 0;
	object-fit: contain;
}

.extensions-viewlet.narrow > .extensions .extension > .icon {
	display: none;
}

.extensions-viewlet > .extensions .extension.loading > .icon {
	display: none;
}

.extensions-viewlet > .extensions .extension > .details {
	flex: 1;
	padding: 4px 0;
	overflow: hidden;
}

.extensions-viewlet > .extensions .extension > .details > .header-container {
	height: 19px;
	display: flex;
	overflow: hidden;
}

.extensions-viewlet > .extensions .extension > .details > .header-container > .header {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	overflow: hidden;
	flex: 1;
	min-width: 0;
}

.extensions-viewlet > .extensions .extension > .details > .header-container > .header > .name {
	font-weight: bold;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.extensions-viewlet > .extensions .extension > .details > .header-container > .header > .version {
	opacity: 0.6;
	font-size: 80%;
	padding-left: 6px;
	flex: 1;
	min-width: fit-content;
}

.extensions-viewlet > .extensions .extension > .details > .header-container > .header > .install-count:not(:empty) {
	font-size: 80%;
	margin: 0 6px;
}

.extensions-viewlet > .extensions .extension > .details > .header-container > .header > .install-count > .octicon {
	font-size: 100%;
	margin-right: 2px;
}

.extensions-viewlet > .extensions .extension > .details > .header-container > .header > .ratings {
	text-align: right;
}

.extensions-viewlet.narrow > .extensions .extension > .details > .header-container > .header > .ratings,
.extensions-viewlet.narrow > .extensions .extension > .details > .header-container > .header > .install-count {
	display: none;
}

.extensions-viewlet > .extensions .extension > .details > .header-container .extension-status {
	width: 8px;
	height: 8px;
	margin-left: 6px;
}

.extensions-viewlet > .extensions .extension > .details > .footer {
	display: flex;
	justify-content: flex-end;
	height: 18px;
	overflow: hidden;
}

.extensions-viewlet > .extensions .extension > .details > .footer > .author {
	flex: 1;
	font-size: 90%;
	padding-right: 6px;
	opacity: 0.6;
	font-weight: 600;
}

.extensions-viewlet > .extensions .extension > .details > .footer > .monaco-action-bar > .actions-container {
	flex-wrap: wrap-reverse;
}

.extensions-viewlet > .extensions .extension > .details > .footer > .monaco-action-bar .action-label {
	margin-right: 0;
	margin-left: 0.3em;
	line-height: 15px;
}

.extensions-viewlet > .extensions .extension.disabled > .icon,
.extensions-viewlet > .extensions .extension.disabled > .details > .header-container,
.extensions-viewlet > .extensions .extension.disabled > .details > .description,
.extensions-viewlet > .extensions .extension.disabled > .details > .footer > .author {
	opacity: 0.5;
}

.extensions-viewlet > .extensions .extension .ellipsis {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.extensions-badge.progress-badge > .badge-content {
	background-image: url("");
	background-position: center center;
	background-repeat: no-repeat;
}